import React, { Component } from 'react';
// 此scss文件负责管理index页面的样式
import './index.scss';

import { get_Swipe_Data } from '../../utils/http_biz.js'
import Swiper from '../../components/Swiper.js'
import Nav from '../../components/Nav.js'
import Group from '../../components/Group.js'
import News from '../../components/News.js'
import Search from '../../components/Search.js'
import { useState, useEffect } from 'react'

function Index(props) {
    // 1.0 改造状态属性
    let [data, setData] = useState([]);
    // // state = {
    // //     data: [],
    // }

    // 2.0 改造服务器的请求
    useEffect(async () => {
        let { body } = await get_Swipe_Data();
        setData(body)
    }, [])
    // async componentDidMount() {
    //     // 模拟进行ajax请求数据给data数组赋值
    //     // 请求url：https://api-haoke-web.itheima.net/home/swiper获取轮播图数据修改到data数组中
    //     let { body } = await get_Swipe_Data();
    //     this.setState({ data: body })
    //     // get_Swipe_Data().then(res => {
    //     //     this.setState({ data: res.body })
    //     // })
    // }

    return (<div className="index">
        {/* 轮播图组件 */}
        <div className="swipe">
            <Swiper data={data} imgHeight={176}></Swiper>
        </div>
        {/* 菜单导航 */}
        <div className='nav'>
            <Nav></Nav>
        </div>

        {/* 租房小组 */}
        <div className='group'>
            <Group></Group>
        </div>

        {/* 最新资讯 */}
        <div className="news">
            <News></News>
        </div>

        {/* 顶部导航栏 */}
        <Search></Search>
    </div>);

}

export default Index;